<template>
  <div class="middle">
    <div
      :style="{ width: '1200px', height: '300px', margin: '15px auto 0 auto' }"
      ref="axis"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.setoption();
  },
  methods: {
    setoption() {
      var myChartDom = this.$refs.axis;
      var myChart = this.$echarts.init(myChartDom);
      // myChart.dispose();
      let option = {
        backgroundColor: "rgba(43, 51, 59,0.9) ",
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            const color = ["#45BCFF", "#00FFF5", "#B664FF"];
            let str = `${params[0].name} <br />`;
            for (let i in params) {
              let dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[i]};"></span>`;
              let nameHtml = `<span style="display:inline-block;width:75px;text-align:left;font-size:12px">${params[i].seriesName}</span>`;
              let valueHtml = `<span style="display:inline-block;width:32px;text-align:left;font-size:12px">${params[i].value}</span>`;
              str += `${dotHtml} ${nameHtml}: ${valueHtml} <br />`;
            }
            return str;
          },
        },
        legend: {
          icon: "pin",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ["当日订单", "昨日订单", "去年同期订单"],
          bottom: "1%",
          left: "19%",
          textStyle: {
            fontSize: 12,
            color: "#2A9DFF",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "10%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
            splitNumber: 24,
            axisLine: {
              lineStyle: {
                color: "#006AD6",
              },
            },
            splitLine: {
              //去除网格线
              show: false,
            },
            splitArea: { show: false }, //去除网格区域
            data: [
              "00:00",
              "01:00",
              "02:00",
              "03:00",
              "04:00",
              "05:00",
              "06:00",
              "07:00",
              "08:00",
              "09:00",
              "10:00",
              "11:00",
              "12:00",
              "13:00",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: '项',
            axisLine: {
              lineStyle: {
                color: "#006AD6",
              },
            },
            scale: true,
            splitNumber: 3,
            splitLine: {
              //去除网格线
              show: false,
            },
            splitArea: { show: false }, //去除网格区域
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
          },
        ],
        series: [
          {
            name: "当日订单",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 3,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#00FFF5",
                borderColor: "rgba(0,201,255,0.27)",
                borderWidth: 10,
              },
            },
            data: [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5, 6, 7],
          },
          {
            name: "昨日订单",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#4188FF",
                borderColor: "rgba(182,100,255,0.2)",
                borderWidth: 10,
              },
            },
            data: [6, 7, 8, 9, 2, 3, 4, 5, 2, 3, 4, 5, 6, 7],
          },
          {
            name: "去年同期订单",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 3,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#8700FF",
                borderColor: "rgba(65,136,255,0.2)",
                borderWidth: 10,
              },
            },
            data: [3, 4, 5, 2, 3, 4, 5, 6, 7, 8, 9, 2, 6, 7],
          },
        ],
      };
      var currentIndex = -1;
      clearInterval(this.times);
      this.times = setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 5000);
      myChart.clear();
      myChart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>